import React from 'react';
import styles from './index.less';
import classnames from 'classnames/bind';
import * as ReactDOM from 'react-dom';
import { CloseCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
import { Button } from 'antd';

const cls = classnames.bind(styles);
interface Config {
  content: any;
  onOk?: () => any; // 确定的回调
  cancel?: () => void; // 返回的回调
  showTipIcon?: boolean;
  showCancel?: boolean;
  cancelTxt?: string;
  closeIcon?: boolean;
  okTxt?: string;
  style?: React.CSSProperties;
  extraText?: string;
  alignRight?: boolean;
  showOk?: boolean;
  close?: () => void;
  contentHtml?: string;
}
function NormalModal(config: Config) {
  const div = document.createElement('div');
  document.body.appendChild(div);
  const currentConfig = {
    showCancel: true,
    showTipIcon: false,
    closeIcon: true,
    showOk: true,
    ...config,
  };

  function  destroy  () {
    const unmountResult = ReactDOM.unmountComponentAtNode(div);
    if (unmountResult && div.parentNode) {
      div.parentNode.removeChild(div);
    }
  }
  function close() {
    if (typeof currentConfig.cancel === 'function') {
      currentConfig.cancel();
    }
    destroy();
  }


const styleCom={
    containerStyle :{ alignItems: currentConfig.alignRight ? 'flex-start' : 'center'},
    contentStyle: { color: '#ffa800', fontSize: 38, marginRight: 8 },
    extraTextStyle: {marginLeft: currentConfig.showTipIcon ? 46 : 0 },
    closeCircleFilledStyle: { color: '#D9DBDE', fontSize: '22px' },
    showCancelStyle: { marginRight: '23px' }
}

const dangerouslySetInnerHTML = {
    __html: currentConfig.contentHtml || '',
  }
  function render() {
    ReactDOM.render(
      <div className={cls('model')}>
        <div
          className={cls('model-content')}
          onClick={(e) => e.stopPropagation()}
        >
          <div
            className={cls('model-content-container')}
            style={styleCom.containerStyle}
          >
            <div className={cls('content')}>
              {currentConfig.showTipIcon && (
                <ExclamationCircleFilled
                  style={styleCom.contentStyle}
                />
              )}
              <span className={cls('text')}>{currentConfig.content}</span>
              {currentConfig.contentHtml && (
                <div
                  className={cls('text')}
                  dangerouslySetInnerHTML={dangerouslySetInnerHTML}
                ></div>
              )}
            </div>
            {currentConfig.extraText ? (
              <div
                className={cls('extraText')}
                style={styleCom.extraTextStyle}
              >
                {currentConfig.extraText}
              </div>
            ) : null}
          </div>
          <div>
            {currentConfig.showCancel && (
              <Button style={styleCom.showCancelStyle} onClick={close}>
                {currentConfig.cancelTxt}
              </Button>
            )}
            {currentConfig.showOk && (
              <Button
                type="primary"
                onClick={() => {
                  if (typeof currentConfig.onOk === 'function') {
                    currentConfig.onOk();
                  }
                  destroy();
                }}
              >
                {currentConfig.okTxt}
              </Button>
            )}
          </div>
          {currentConfig.closeIcon && (
            <CloseCircleFilled
              onClick={() => {
                if (typeof currentConfig.close === 'function') {
                  currentConfig.close();
                }
                destroy();
              }}
              className={cls('close')}
              style={styleCom.closeCircleFilledStyle}
            />
          )}
        </div>
      </div>,
      div,
    );
  }

  render();
  return {
    close,
    destroy,
  };
}

export default NormalModal;